<template>
  <el-dialog
    class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="baTable.form.operate ? true : false"
    @close="baTable.toggleForm"
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']">
        {{ baTable.form.operate !== "edit" ? "添加" : "编辑" }}
      </div>
    </template>
    <el-scrollbar
      v-loading="baTable.form.loading"
      class="ba-table-form-scrollbar"
    >
      <div
        class="ba-operate-form"
        :class="'ba-' + baTable.form.operate + '-form'"
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
      >
        <el-form
          ref="formRef"
          @keyup.enter="baTable.onSubmit(formRef)"
          :model="baTable.form.items"
          label-position="right"
          :label-width="baTable.form.labelWidth + 'px'"
          :rules="rules"
          v-if="!baTable.form.loading"
        >
          <el-form-item prop="noticeConfigName" label="配置名称">
            <el-input
              v-model="baTable.form.items!.noticeConfigName"
              type="string"
              placeholder="配置名称"
            ></el-input>
          </el-form-item>
          <el-form-item prop="userName" label="接收用户">
            <el-select
              v-model="state.userName"
              placeholder="请选择接收用户"
              multiple
              @change="chooseUser"
            >
              <el-option
                v-for="item in state.userOptions"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              >
                <span style="float: left">{{ item.userName }}</span>
                <span
                  style="
                    float: right;
                    color: var(--el-text-color-secondary);
                    font-size: 13px;
                  "
                >
                  {{ item.nickName }}
                </span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="noticeCycle" label="通知周期">
            <el-select
              v-model="baTable.form.items!.noticeCycle"
              multiple
              placeholder="请选择通知周期"
            >
              <el-option
                v-for="item in state.cycleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="noticeStartTime" label="通知时段起始时间">
            <el-time-picker
              v-model="baTable.form.items!.noticeStartTime"
              value-format="HH:mm:ss"
            />
            <!-- <el-date-picker
              v-model="baTable.form.items!.noticeStartTime"
              type="datetime"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :disabled-date="pickerOptions"
            /> -->
            <!-- <div class="block-help" style="width: 100%">双击下拉选择</div> -->
          </el-form-item>
          <el-form-item prop="noticeEndTime" label="通知时段结束时间">
            <el-time-picker
              v-model="baTable.form.items!.noticeEndTime"
              value-format="HH:mm:ss"
            />
            <!-- <el-date-picker
              v-model="baTable.form.items!.noticeEndTime"
              type="datetime"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :disabled-date="pickerOptions"
            /> -->
            <!-- <div class="block-help" style="width: 100%">双击下拉选择</div> -->
          </el-form-item>
          <el-form-item prop="noticeWay" label="通知方式">
            <el-select
              v-model="baTable.form.items!.noticeWay"
              multiple
              placeholder="请选择通知方式"
            >
              <el-option
                v-for="item in noticeConfig.typeWay"
                :key="item.dictCode"
                :label="item.dictLabel"
                :value="item.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="noticeType" label="通知类型">
            <el-select
              v-model="baTable.form.items!.noticeType"
              placeholder="请选择通知类型"
            >
              <el-option
                v-for="item in noticeConfig.type"
                :key="item.dictCode"
                :label="item.dictLabel"
                :value="item.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="baTable.form.items!.remark"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="备注"
            />
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'"
      >
        <el-button @click="baTable.toggleForm('')">取消</el-button>
        <el-button
          v-blur
          :loading="baTable.form.submitLoading"
          @click="baTable.onSubmit(formRef)"
          type="primary"
        >
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import _ from "lodash";
import { reactive, ref, inject, onMounted, watch, nextTick } from "vue";
import type baTableClass from "@/utils/baTable";
import type { ElForm, FormItemRule, FormRules, ElTree } from "element-plus";

const formRef = ref<InstanceType<typeof ElForm>>();
const baTable = inject("baTable") as baTableClass;
const user = inject("user") as any;
const noticeConfig = inject("noticeConfig") as any;

const state: {
  regionOptions: anyObj[];
  cycleOptions: anyObj[];
  userOptions: anyObj[];
  userName: any[];
} = reactive({
  regionOptions: [], //区域列表
  userOptions: [], //用户列表
  cycleOptions: [
    {
      value: "周一",
      label: "周一",
    },
    {
      value: "周二",
      label: "周二",
    },
    {
      value: "周三",
      label: "周三",
    },
    {
      value: "周四",
      label: "周四",
    },
    {
      value: "周五",
      label: "周五",
    },
    {
      value: "周六",
      label: "周六",
    },
    {
      value: "周日",
      label: "周日",
    },
  ], //通知周期列表
  userName: [],
});

//限制用户只能选择当天之后日期
const pickerOptions = (time: Date) => {
  return time.getTime() < Date.now() - 1 * 24 * 60 * 60 * 1000;
};

const rules = reactive<FormRules>({
  noticeConfigName: [
    { required: true, message: "配置名称不能为空", trigger: "blur" },
  ],
  userName: [{ required: true, message: "接收用户不能为空", trigger: "blur" }],
  noticeCycle: [
    { required: true, message: "通知周期不能为空", trigger: "blur" },
  ],
});

//获取用户列表
const getUserList = () => {
  user.getUsers({ pageSize: 10000 }).then((res: any) => {
    state.userOptions = res.rows;
  });
};
//选择用户
const chooseUser = (val: any) => {
  baTable.form.items!.userId = [];
  baTable.form.items!.nickName = []; //昵称
  baTable.form.items!.userName = []; //用户名
  let len = val.length,
    userName: any = [],
    userId: any = [],
    nickName: any = [];
  for (let i = 0; i < len; i++) {
    let data = _.filter(state.userOptions, { userId: val[i] });
    userName.push(data[0].userName);
    nickName.push(data[0].nickName);
    userId.push(data[0].userId);
  }
  baTable.form.items!.nickName = nickName; //昵称
  baTable.form.items!.userName = userName; //用户名
  baTable.form.items!.userId = userId;
  console.log("选择用户", val, baTable.form.items);
};

onMounted(() => {
  getUserList(); //获取用户列表
  if (baTable.form.operate === "edit") {
    setTimeout(() => {
      state.userName = baTable.form.items!.userId;
    }, 500);
  }
});

defineExpose({});
</script>
<style lang="scss" scoped>
.el-scrollbar {
  overflow: auto;
  position: relative;
  height: 100%;

  .el-scrollbar__wrap {
    overflow: auto;
    height: 100%;
  }
}
</style>
